<template>
  <div class="page">
    <el-container>
      <el-aside width="50%"></el-aside>
      <el-main width="50%">
        <div id="login-box">
          <el-row>
            <el-col :span="17"><br /></el-col>
            <el-col :span="7">
              <el-link type="primary">没有账户？请注册</el-link>
            </el-col>
          </el-row>

          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
            class="login-tab-card"
          >
            <el-tab-pane label="用户名" name="first">
              <by-user-name></by-user-name>
            </el-tab-pane>
            <el-tab-pane label="短信登录" name="second">
              <by-phone-msg></by-phone-msg>
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label">邮件登录 </span>
              <by-email></by-email>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ByUserName from "./ByUserName.vue";
import ByPhoneMsg from "./ByPhoneMsg.vue";
import ByEmail from "./ByEmail.vue";

export default {
  components: { ByUserName ,ByPhoneMsg,ByEmail},
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },


  },
};
</script>

<style>
#app {
  height: 100%;
  width: 100%;
  margin: auto;
}

/* 背景图片 */
.page {
  width: 100%;
  min-height: 100vh;
  background: #2848af url("../../assets/login_bg.jpg") right top no-repeat;
  background-size: cover;
  font-size: 1rem;
}
.bg-img {
  z-index: 1;
  width: 100%;
  height: auto;
}
/* 框架 */
.el-aside {
  
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  /* background-color: #E9EEF3; */
  color: #333;
  text-align: center;
  height: 100%;
}

.el-container {
  margin: 0;
  height: 100vh;
}

/* 登录框 */
#login-box {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(145, 148, 242, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;

  padding: 20px;
  height: 70%;
  margin-top: 15%;
  margin-right: 20%;
}
.login-tab-card{
     background-color: #fff;
       height: 70%;
}
</style>